Connection

Models a connection.

new Connection()

Source:
  • connection-api.js, line 1

Extends

Members

overlays

List of Overlays for this component.

Inherited From:
Source:
  • overlaycomponent.js, line 3

scope

Scope descriptor for the Connection.

Source:
  • connection-api.js, line 10

source

Source element in the Connection.

Source:
  • connection-api.js, line 12

sourceId

ID of the source element.

Source:
  • connection-api.js, line 6

target

Target element in the Connection..

Source:
  • connection-api.js, line 14

targetId

ID of the target element.

Source:
  • connection-api.js, line 8

Methods

addClass(class)

Adds a class or some classes to the visual elements for the given component.

Parameters:
Name Type Description
class String

The class(es) to add. The values are appended as given, meaning you can supply a space separated string of several classes if you wish.

Inherited From:
Source:
  • uicomponent.js, line 11

addOverlay(overlaySpec)

Adds an Overlay to the component.

Parameters:
Name Type Description
overlaySpec Object

Specification of the Overlay to add.

Inherited From:
Source:
  • overlaycomponent.js, line 29

addType(typeId, params, doNotRepaint)

Adds a type to the component. Note this is distinct from jsPlumbUIComponent#setType, which overrides all current types - this function just adds a type to the existing list.

Parameters:
Name Type Argument Default Description
typeId String

Id of the type to add.

params Object <optional>

Optional params to use when applying the type.

doNotRepaint Boolean <optional>
false

Tells jsPlumb not to repaint after adding the type.

Inherited From:
Source:
  • uicomponent.js, line 23

bind(event, listener)

Binds a listener to an event.

Parameters:
Name Type Description
event String

Name of the event to bind to.

listener Function

Function to execute.

Inherited From:
Source:
  • util-api.js, line 21

cleanupListeners()

Removes all listeners.

Inherited From:
Source:
  • util-api.js, line 28

Connection(params)

Connection constructor. You should not ever create one of these directly. If you make a call to jsPlumb.connect, all of the parameters that you pass in to that function will be passed to the Connection constructor; if your UI uses the various Endpoint-centric methods like addEndpoint/makeSource/makeTarget, along with drag and drop, then the parameters you set on those functions are translated and passed in to the Connection constructor. So you should check the documentation for each of those methods.

Parameters:
Name Type Description
params Object

Constructor parameters

Properties
Name Type Argument Default Description
source String | Element | Selector | Endpoint <optional>

Either an element id, a selector for an element, or an Endpoint.

target String | Element | Selector | Endpoint <optional>

Either an element id, a selector for an element, or an Endpoint

scope String <optional>
`jsPlumb.Defaults.Scope`

Scope descriptor for this connection.

container String | Element | Selector <optional>

Optional id, element or selector instructing jsPlumb where to attach all the elements it creates for this connection. you should read the documentation for a full discussion of this.

detachable Boolean <optional>
true

Defines whether or not the connection may be detached using the mouse.

reattach Boolean <optional>
false

Defines whether not the connection should be retached if it was dragged off an Endpoint and then dropped in whitespace.

endpoint Object <optional>

Optional Endpoint definition to use for both ends of the connection.

endpoints Object[] <optional>

Optional array of two Endpoint definitions, one for each end of the Connection. This and 'endpoint' are mutually exclusive parameters.

endpointStyle Object <optional>

Endpoint style definition to use for both ends of the Connection.

endpointStyles Object[] <optional>

Array of two Endpoint style definitions, one for each end of the Connection. This and 'endpoint' are mutually exclusive parameters.

paintStyle Object <optional>

Parameters defining the appearance of the Connection. Optional; jsPlumb will use the defaults if you supply nothing here.

hoverPaintStyle Object <optional>

Parameters defining the appearance of the Connection when the mouse is hovering over it. Optional; jsPlumb will use the defaults if you supply nothing here (note that the default hoverPaintStyle is null).

cssClass String <optional>

CSS class to set on the display element associated with this Connection.

hoverClass String <optional>

CSS class to set on the display element associated with this Connection when it is in hover state.

overlays Object[] <optional>

Array of Overlay definitions to appear on this Connection.

drawEndpoints Boolean <optional>
true

If false, instructs jsPlumb to not draw the endpoints for this Connection. Be careful with this: it only really works when you tell jsPlumb to attach elements to the document body. Read the documentation for a full discussion of this.

parameters Object <optional>
{}

JS object containing parameters to set on the Connection. These parameters are then available via the getParameter method.

Source:
  • connection-api.js, line 4

getConnector() → {Connector}

Gets the underlying Connector for this Connection (eg. a Bezier connector, straight line connector, flowchart connector etc)

Source:
  • connection-api.js, line 16
Returns:

The current Connector

Type
Connector

getLabel()

Returns the label text for this component (or a function if you are labelling with a function). This does not return the overlay itself; this is a convenience method which is a pair with setLabel; together they allow you to add and access a Label Overlay without having to create the Overlay object itself. For access to the underlying label overlay that jsPlumb has created, use getLabelOverlay.

Inherited From:
Source:
  • overlaycomponent.js, line 5
See:
  • #getOverlay
  • #getLabelOverlay

getLabelOverlay() → {Overlay}

Inherited From:
Source:
  • overlaycomponent.js, line 7
See:
  • #setLabel
Returns:

The underlying internal label overlay, which will exist if you specified a label on a connect call, or have called setLabel at any stage. Otherwise it will be null.

Type
Overlay

getOverlay(overlayId) → {Overlay}

Gets an overlay, by ID. Note: by ID. You would pass an 'id' parameter in to the Overlay's constructor arguments, and then use that to retrieve it via this method.

Parameters:
Name Type Description
overlayId String

Id of the overlay to retrieve.

Inherited From:
Source:
  • overlaycomponent.js, line 9
Returns:

The overlay stored against the given id, null if not found.

Type
Overlay

getOverlays() → {Array}

Gets all the overlays for this component.

Inherited From:
Source:
  • overlaycomponent.js, line 11
Returns:

List of the component's overlays.

Type
Array

getParameter(name) → {Object}

Gets a parameter from the component

Parameters:
Name Type Description
name String

Name of the parameter to get

Inherited From:
Source:
  • uicomponent.js, line 3
Returns:

The given parameter's value, null if not found.

Type
Object

getParameters() → {Object}

Gets all parameters from the component. Note that you are given the actual parameters object, not a copy, so you can alter their values directly, and if you hold the reference to the parameters object you could cause a memory leak.

Inherited From:
Source:
  • uicomponent.js, line 7
Returns:

All of the component's parameters.

Type
Object

getType() → {String[]}

Gets the current type - or types - for this component.

Inherited From:
Source:
  • uicomponent.js, line 17
Returns:

The current list of types, empty if none registered.

Type
String[]

hasType(typeId) → {Boolean}

Returns whether or not the component currently has the given type.

Parameters:
Name Type Description
typeId String

Id of the type to check for

Inherited From:
Source:
  • uicomponent.js, line 21
Returns:

True if the component has the type, false if not.

Type
Boolean

hideOverlay(overlayId)

Hides the overlay specified by the given id.

Parameters:
Name Type Description
overlayId String

Id of the overlay to hide.

Inherited From:
Source:
  • overlaycomponent.js, line 13

hideOverlays()

Hides all Overlays for this component.

Inherited From:
Source:
  • overlaycomponent.js, line 15

isDetachable() → {Boolean}

Returns whether or not this connection can be detached from its target/source endpoint. by default this is false; use it in conjunction with the 'reattach' parameter.

Source:
  • connection-api.js, line 18
Returns:

True if can be detached, false otherwise.

Type
Boolean

isEditable() → {Boolean}

Returns whether or not the Connection is editable.

Source:
  • connection-api.js, line 20
Returns:

True if editable, false if not.

Type
Boolean

isHover() → {Boolean}

Returns whether or not the object is currently in hover state

Inherited From:
Source:
  • uicomponent.js, line 29
Returns:

True if in hover state, false if not.

Type
Boolean

isReattach() → {Boolean}

Returns whether or not this connection will be reattached after having been detached via the mouse and dropped. by default this is false; use it in conjunction with the 'detachable' parameter.

Source:
  • connection-api.js, line 22
Returns:

True if will reattach, false if not.

Type
Boolean

isSuspendEvents() → {Boolean}

Inherited From:
Source:
  • util-api.js, line 27
Returns:

True if events are suspended, false otherwise.

Type
Boolean

isVisible()

Returns whether or not the Connection is currently visible.

Source:
  • connection-api.js, line 24
Returns:

True if visible, false if not.

reapplyTypes(params)

Reapplies the current list of types with the given (optional) parameters. See the jsPlumb documentation for a full discussion of types.

Parameters:
Name Type Argument Description
params Object <optional>

Optional params to use when reapplying types.

Inherited From:
Source:
  • uicomponent.js, line 19

removeAllOverlays()

Removes all overlays from the component, and then repaints.

Inherited From:
Source:
  • overlaycomponent.js, line 21

removeClass(class)

Removes a class or some classes from the visual elements for the given component. You can supply a space separated string of several classes if you wish.

Parameters:
Name Type Description
class String

The class(es) to remove.

Inherited From:
Source:
  • uicomponent.js, line 13

removeOverlay(overlayId)

Removes an overlay by ID. Note: by ID. this is a string you set in the overlay spec.

Parameters:
Name Type Description
overlayId String

Id of the overlay to remove.

Inherited From:
Source:
  • overlaycomponent.js, line 23

removeOverlays(overlayIds)

Removes a set of overlays by ID. Note: by ID. This is a string you set in the overlay spec.

Parameters:
Name Type Argument Description
overlayIds String <repeatable>

This function takes an arbitrary number of arguments, each of which is a single overlay id.

Inherited From:
Source:
  • overlaycomponent.js, line 25

removeType(typeId, doNotRepaint)

Removes the given type from the component.

Parameters:
Name Type Argument Default Description
typeId String

Id of the type to remove.

doNotRepaint Boolean <optional>
false

Tells jsPlumb not to repaint after removing the type.

Inherited From:
Source:
  • uicomponent.js, line 25

setConnector(connector)

Sets the Connection's connector (eg "Bezier", "Flowchart", etc). You pass a Connector definition into this method, the same thing that you would set as the 'connector' property on a jsPlumb.connect call.

Parameters:
Name Type Description
connector String | Object

Connector definition. See jsPlumb documentation for a discussion.

Source:
  • connection-api.js, line 26

setDetachable(detachable)

Sets whether or not this connection is detachable.

Parameters:
Name Type Description
detachable Boolean

Whether or not to set the Connection to be detachable.

Source:
  • connection-api.js, line 28

setEditable(editable)

Sets whether or not the Connection is editable. This will only be honoured if the underlying Connector is editable - not all types are.

Parameters:
Name Type Description
editable Boolean

Whether or not to set the Connection to be editable

Source:
  • connection-api.js, line 30

setHover(hover, ignoreAttachedElements)

Sets/unsets the hover state of this component.

Parameters:
Name Type Argument Default Description
hover Boolean

Hover state boolean

ignoreAttachedElements Boolean <optional>
false

If true, does not notify any attached elements of the change in hover state. Used mostly by jsPlumb internally, to avoid infinite loops.

Inherited From:
Source:
  • uicomponent.js, line 33

setHoverPaintStyle(style, doNotRepaint)

Sets the paint style to use when the mouse is hovering over the component. This is null by default. The hover paint style is applied as extensions to the paintStyle; it does not entirely replace it. This is because people will most likely want to change just one thing when hovering, say the color for example, but leave the rest of the appearance the same.

Parameters:
Name Type Argument Description
style Object

Style to use when the mouse is hovering.

doNotRepaint Boolean <optional>

If true, the component will not be repainted. Useful when setting things up initially.

Inherited From:
Source:
  • uicomponent.js, line 31

setLabel(label)

Sets the component's label.

Parameters:
Name Type Description
label String | Function | Object

Label to set. May be a String, a Function that returns a String, or a params object containing { "label", "labelStyle", "location", "cssClass" }. Note that this uses innerHTML on the label div, so keep that in mind if you need escaped HTML.

Inherited From:
Source:
  • overlaycomponent.js, line 27

setPaintStyle(style, doNotRepaint)

Sets the component's paint style and then repaints the component.

Parameters:
Name Type Argument Default Description
style Object

Style to use.

doNotRepaint Boolean <optional>
false

If true, the component will not be repainted.

Inherited From:
Source:
  • uicomponent.js, line 35

setParameter(name, value)

Sets a parameter on the component

Parameters:
Name Type Description
name String

Name of the parameter to set

value Object

Value to set

Inherited From:
Source:
  • uicomponent.js, line 5

setParameters(params)

Sets all parameters on the component.

Parameters:
Name Type Description
params Object

Parameters to set.

Inherited From:
Source:
  • uicomponent.js, line 9

setReattach(reattach)

Sets whether or not this connection will reattach after having been detached via the mouse and dropped.

Parameters:
Name Type Description
reattach Boolean

Whether or not to set the Connection to reattach after drop in whitespace.

Source:
  • connection-api.js, line 32

setType(typeId, params, doNotRepaint)

This function sets a type for the given component. It replaces all existing types. For a full discussion of the concept of types, see the jsPlumb documentation.

Parameters:
Name Type Argument Default Description
typeId String

Id of the type to set.

params Object <optional>

Optional parameter object to expand.

doNotRepaint Boolean <optional>
false

Tells jsPlumb not to repaint after setting the type.

Inherited From:
Source:
  • uicomponent.js, line 15

setVisible(visible)

Sets whether or not the Connection should be visible.

Parameters:
Name Type Description
visible Boolean

Boolean indicating desired visible state.

Source:
  • connection-api.js, line 34

showOverlay(overlayId)

Shows the overlay specified by the given id.

Parameters:
Name Type Description
overlayId String

Id of the overlay to show.

Inherited From:
Source:
  • overlaycomponent.js, line 18

showOverlays()

Shows all Overlays for this component.

Inherited From:
Source:
  • overlaycomponent.js, line 20

suspendEvents(val)

Sets whether or not events are suspended.

Parameters:
Name Type Description
val Boolean

Whether or not to suspend events.

Inherited From:
Source:
  • util-api.js, line 26

toggleType(typeId, params, doNotRepaint)

Toggles the given type on the component.

Parameters:
Name Type Argument Default Description
typeId String

Id of the type to toggle.

params Object <optional>

Optional params to use if the type does not exist and jsPlumb applies it.

doNotRepaint Boolean <optional>
false

Tells jsPlumb not to repaint after toggling the type.

Inherited From:
Source:
  • uicomponent.js, line 27

unbind(event)

Clears either all listeners, or listeners for some specific event.

Parameters:
Name Type Argument Description
event String <optional>

Optional. constrains the clear to just listeners for this event.

Inherited From:
Source:
  • util-api.js, line 25